<template>
  <div class="common-layout">
    <el-container>
      <el-header style="margin-top: 10px">
        <span>
          <span  style="width:300px;font-weight:bold;">
            欢迎 {{username}} 登录
          </span>
        </span>
        <el-button type="primary" @click="dialogVisible = true" style="float: right">退出</el-button>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
            default-active="/index" text-color="#fff" @select="toPage">
            <el-menu-item index="/index">
              <el-icon>
                <House />
              </el-icon>
              <span>后台首页</span>
            </el-menu-item>
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <Menu />
                </el-icon>
                <span>停车场管理系统</span>
              </template>
              <el-menu-item index="/parklot">停车场管理</el-menu-item>
              <el-menu-item index="/car">车辆管理</el-menu-item>
              <el-menu-item index="/history">停车记录</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>

  <!-- 退出的对话框开始 -->
  <el-dialog v-model="dialogVisible" width="500">
    <span>确认退出？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="logout">确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 退出的对话框结束 -->
</template>
<script setup>
import  { ref } from 'vue';
import router from '@/router';
import { RouterLink, RouterView } from 'vue-router'
import adminApi from "@/api/adminApi.js";
import {useTokenStore} from "@/stores/token.js";
const username = ref('');
const dialogVisible = ref(false);
const tokenStore = useTokenStore();
function toPage(indexPath) {
  //编程式导航 
  router.push(indexPath);
}
// 退出
function logout() {
  //清除token
  tokenStore.$reset();
  //跳转到登录页面
  router.push('/login');
}
//获取已经登录用户的信息
function getLoginInfo(){
  adminApi.getLoginInfo()
      .then(resp =>{
        console.log(resp);
          // username.value = resp.data.username;
      })
}
getLoginInfo();
</script>
